<template>
	<view>
		<view class="list-view">
			<view class="tui-flex-box">
				<view class="tui-flex" style="flex-wrap: wrap;" v-for="(item,index) in topicList" :key="index">
					<view :style="index %2 == 0? 'background-color: #FAFAFA;':''" style="width: 100%;box-shadow: 2rpx 1rpx 1rpx #D1D1D1">
						
						
						<view style="height: 30rpx;width: 100%;"></view>
					<navigator :url='"/pages/user/user?id=" + item.memberId' hover-class='none' style="display: flex; ">
						<view class="tui-left tui-col-12" style="margin-left: 30rpx;height: 60rpx;display: flex;">
							<image :src="item.memberAvatar" mode="widthFix" style="width: 60rpx;border-radius: 60rpx;"></image>
							<text style="font-size: 24rpx;font-weight: bold;margin-left: 20rpx;color: #8A5966;display: flex;align-items: center;justify-content: center;">{{item.memberNickname}}</text>
						</view> 
					</navigator>
		
					<navigator :url="'/pages/community/topicInfo?topicId=' + item.id" hover-class='none' style="display: flex; flex-wrap: wrap;width: 100%;">
		
						<view class="tui-left tui-col-12" style="margin-left: 30rpx;height: 50rpx;display: flex;width: 100%;" >
		
							<view class="title" style="margin-left: 70rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;font-weight: bold;">
									<text v-text="textUtils.beyondLimitSubStr(item.title,15,'...')"></text>
									
									<!-- <text v-if="item.status.hot == '1'" style="margin-left: 5rpx;color: #FFFFFF; background-color: #FF201F">热</text>
									<text v-if="item.status.elite == '1'" style="margin-left: 5rpx;color: #FFFFFF; background-color: #000000">精</text>
									<text v-if="item.status.newly == '1'"style="margin-left: 5rpx;color: #FFFFFF; background-color: #16AB60">新</text> -->
		
							</view>
						</view>
						
						<view class="tui-left tui-col-12" style="width: 100%;margin-left: 100rpx;opacity:0.85;margin-top: 10rpx;display: flex;width: 80%;color: #666666;font-size: 26rpx;" >
							<!-- 定义临时变量 -->
							<view v-show="false">{{imgList = htmlUtils.getImageUrls(item.content,3)}}</view>
							
		
							<view >
								<text v-text="textUtils.beyondLimitSubStr(htmlUtils.getText(item.content),50,'...')" ></text>
								<view style="display: flex;flex-wrap: nowrap; margin-top: 20rpx;" >
									
									<!-- 如果图片为多张,遍历.而且第二张开始,图片有间隔 -->
									<image v-for="(img,index) in imgList" :key="index" :src="img" :style="index > 0 ?'margin-left: 30rpx;':''" style="height: 100rpx;width: 150rpx;display: flex"></image>
								</view>
							</view>
							
						</view>
						
						
		
						<view class="tui-left tui-col-12" style="margin-top: 40rpx;margin-left: 40rpx;height: 50rpx;display: flex;flex-wrap: nowrap;">
							
		
							<view class="tui-left tui-col-6" style="font-size: 20rpx;">
		
								<text style="font-size: 22rpx;" v-text="relativeTimeGetter.getText(item.createTime)"></text>
							</view>
		
							<view class="tui-left tui-col-6" style="margin-right: 20rpx;display: flex;justify-content: flex-end;">
								<view style="color: #666666;font-size: 20rpx;" >
		
									<tui-icon :name="'eye'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.viewCount + '  '">
										{{item.viewCount}}
									</text>
		
									<tui-icon :name="'message'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.replyCount  + '  '"></text>
		
		
									<tui-icon :name="'agree'" :size="20" :color="'#666666'"></tui-icon>
									<text v-text="'   ' + item.praiseCount  + '  '"></text>
		
								</view>
							</view>
						</view >
							
					</navigator>
					</view>
					
				</view>
			
			</view>
		
		</view>
		<tui-nomore v-if="!allowLoading"></tui-nomore> <!--显示没有更多数据-->
	</view>
</template>

<script>
	import indexApi from "@/request/api/indexApi.js"
	import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
	import textUtils from "@/utils/TextUtils.js"
	import htmlUtils from "@/utils/HtmlUtils.js"
	export default {
		data() {
			return {
				topicList:[],
				currentPage:1,
				allowLoading:true,//是否允许加载，如果数据已经全部拉取完毕，就可以关闭了
				textUtils:textUtils,
				htmlUtils:htmlUtils,
				relativeTimeGetter:relativeTimeGetter
			}
		},
		mounted(){
			//监听父组件触底事件，触底是拉取数据
			uni.$on('onReachBottom',(currentTab)=>{
				if(this.allowLoading && currentTab=='hotTopic'){
					this.getHotTopics()
				}
			});
		},
		created() {
			this.getHotTopics();
		},
		methods: {
			/**
			 * 获取热帖
			 */
			getHotTopics(){
				indexApi.getHotTopics(this.currentPage).then((data)=>{
					if(data.code === 0 && data.list){
						this.topicList = [...this.topicList,...data.list]
						this.currentPage++;
						if(data.list.length == 0){
							this.allowLoading = false;
						}
					}else{
						this.allowLoading = false;
					}
				})
			
			}
		},
	}
</script>

<style>
	@import '@/static/style/thorui.css';
</style>
